<template>
    <div>
    <h3>登录</h3>
    <table class="table table-bordered">
        <tbody>
             <tr>
                 <td align="right">账号</td>
                 <td>
                    <input type="text" v-model="userName">
                 </td>
             </tr>
               <tr>
                 <td align="right">密码</td>
                 <td>
                    <input type="text" v-model="userPwd">
                 </td>
             </tr>
                 <tr>
                 <td align="right"></td>
                 <td>
                    <input type="button" @click="Login" value="登录" class="btn btn-primary">
                 </td>
             </tr>
        </tbody>
    </table>
    </div>
</template>

<script setup lang="ts">
// v-model 双向绑定 数据变 视图变 视图变 数据变
// v-model 只能用于表单元素 
// v-model:value 简写为 v-model 
// v-model作用:获取表单元素中的值
import { ref, reactive } from 'vue'

let userName = ref("");
let userPwd = ref("");

const Login = () => {
  alert(userName.value + " ," + userPwd.value)
}
</script>

<style scoped>

</style>